<template>
  <div class="user" v-if="userItem">
    <span
      class="iconfont icon-arrow-left-bold icon1"
      @click="$router.go(-1)"
    ></span>
    <div
      class="user-bg"
      :style="[{ 'background-image': 'url(' + userData.backgroundUrl + ')' }]"
    ></div>
    <div class="userData">
      <div class="user-img">
        <img :src="userData.avatarUrl" alt="" />
      </div>
      <div class="user-name">{{ userData.nickname }}</div>
      <div class="g-f-lv" @click="gzData">
        <span>{{ userData.follows }}关注 |</span
        ><span>{{ userData.followeds }}粉丝 |</span
        ><span>Lv.{{ userData.playlistCount }}</span>
      </div>
      <div class="d-time"><span>广东广州</span><span>村龄99天</span></div>
      <div><span class="edit">编辑资料</span></div>
    </div>
    <router-link
      class="i-love"
      tag="div"
      :to="'/rankItem?id=' + userItem[0].id"
    >
      <van-cell center class="swiper-slide" :label="userItem[0].playCount">
        <template #icon>
          <div class="img"><img :src="userItem[0].coverImgUrl" alt="" /></div>
        </template>
        <template #title>
          <span class="songName">{{ userItem[0].name }}</span>
        </template>
        <template #right-icon>
          <van-icon name="play" class="play" color="rgb(170,170,170)" />
        </template>
      </van-cell>
    </router-link>
    <van-tabs type="line" scrollspy background="#ebedf0">
      <van-tab title="我创建的歌单">
        <div class="remLists">
          <div class="list-box">
            <div class="list-nav">我创建的歌单<van-icon name="arrow" /></div>
            <router-link
              v-for="(item, index) in cjPlay"
              :key="index"
              tag="div"
              class="lis"
              :to="'/rankItem?id=' + item.id"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="name">
                {{ item.name }}
                <div>{{ item.trackCount }}首</div>
              </div>
            </router-link>
          </div>
        </div>
      </van-tab>
      <van-tab title="我收藏的歌单">
        <div class="remLists">
          <div class="list-box">
            <div class="list-nav">我收藏的歌单<van-icon name="arrow" /></div>
            <router-link
              v-for="(item, index) in scPlay"
              :key="index"
              tag="div"
              class="lis"
              :to="'/rankItem?id=' + item.id"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="name">{{ item.name }}</div>
            </router-link>
          </div>
        </div>
      </van-tab>
      <van-tab title="最近播放">
        <div class="zj">

           <div class="zjMuc">
              <div class="icon">
                <van-icon name="play-circle-o" size="30" />
              </div>
              <div class="txt">最近播放音乐</div>
            </div>
          <div class="zjMV">
            <div class="icon"><van-icon name="video-o" size="30" /></div>
            <div class="txt">最近播放MV</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUser, getSubCount, getUserData, getUserDataS } from "../api/user";

export default {
  data() {
    return {
      userData: {},
      uid: null,
      userItem: [{ playCount: null }],
      show: false,
    };
  },
  methods: {
    getData() {
      let uid = window.localStorage.getItem("uid");
      getUserData({
        uid,
      }).then((data) => {
        console.log(data);
      });
      getUserDataS().then((data) => {
        console.log(data);
      });
    },
    gzData() {
      this.$router.push({ path: "/gz" });
    },
  },
  computed: {
    cjPlay() {
      return this.userItem.filter((item) => {
        return item.userId == this.uid;
      });
    },
    scPlay() {
      return this.userItem.filter((item) => {
        return item.userId != this.uid;
      });
    },
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
  created() {
    this.uid = window.localStorage.getItem("uid");
  },
  mounted() {},
  watch: {
    uid() {
      getUser({
        uid: this.uid,
      }).then((data) => {
        this.userData = data.profile;
        console.log(this.userData);
      });
      getSubCount({
        uid: this.uid,
      }).then((data) => {
        console.log(data);
        this.userItem = data.playlist;
      });
    },
  },
};
</script>

<style lang="less">
.user {
  background-color: #ebedf0;
  position: relative;
  padding-bottom: 52px;
  .icon1 {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 24px;
    color: #fff;
  }
  .user-bg {
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .userData {
    position: relative;
    top: -20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    width: 95%;
    height: 190px;
    margin: auto;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    div {
      margin: 10px 0;
    }
    .user-name {
      font-size: 16px;
      font-weight: bold;
    }
    .g-f-lv {
      color: #ccc;
    }
    .user-img {
      width: 75px;
      height: 75px;
      overflow: hidden;
      border-radius: 50%;
      position: absolute;
      top: -50px;
      img {
        width: 100%;
      }
    }
    .d-time {
      span {
        border-radius: 6px;
        padding: 4px;
        font-size: 14px;
        color: #494949db;
      }
    }
    .edit {
      border-radius: 6px;
      padding: 4px;
      color: #494949db;
    }
  }
  .i-love {
    padding: 10px;
    border-radius: 6px;
    overflow: hidden;
    .img {
      width: 45px;
      height: 45px;
      padding-right: 10px;
      img {
        width: 100%;
      }
    }
  }
  .list-box {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    .list-nav {
      font-size: 14px;
      margin: 10px 0;
      font-weight: 400;
      color: rgb(92, 81, 81);
    }
    .lis {
      display: flex;
      align-items: center;
      .img {
        width: 66px;
        height: 66px;
        margin-right: 10px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 1005;
        }
      }
      .name {
        font-size: 14px;
        color: #494949;
      }
    }
  }
  .zj {
    padding: 15px;
    .zj-nav {
      display: flex;
      align-items: center;
      padding: 10px;
    }
    .zjMuc {
      height: 50px;
      width: 100%;
      background-color: #fff;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      border-radius: 8px;
    }
    .zjMV {
      height: 50px;
      width: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-radius: 8px;
    }
    .icon {
      margin: 0 10px;
    }
    .txt {
      font-size: 17px;
      color: rgb(53, 43, 43);
    }
  }
}
</style>